<template lang="html">
  <div class="join">
    <header-item skin='black' active='5'></header-item>

    <div class="body">
      <div class="content">

        <h1>加入我们</h1>
        <div class="subText">
          在这里，你将拥有宽松、愉悦、平等的工作环境，你将收获<br>
          友爱、尊重、温暖的创业伙伴，更重要的是，你有可能实现自己最大的价值。
        </div>

        <div class="mainJobs">
          <div class="job j1" :class='{"active":activeName == 1}' @click='activeName = 1' @touchstart='activeName = 1'>大数据研发工程师</div>
          <div class="job j2" :class='{"active":activeName == 2}' @click='activeName = 2' @touchstart='activeName = 2'>平面设计师</div>
          <div class="job j3" :class='{"active":activeName == 3}' @click='activeName = 3' @touchstart='activeName = 3'>交互设计师</div>
          <div class="job j4" :class='{"active":activeName == 4}' @click='activeName = 4' @touchstart='activeName = 4'>Android开发工程师</div>
          <div class="job j5" :class='{"active":activeName == 5}' @click='activeName = 5' @touchstart='activeName = 5'>AI研发工程师</div>
          <div class="job j6" :class='{"active":activeName == 6}' @click='activeName = 6' @touchstart='activeName = 6'>iOS开发工程师</div>
          <div class="job j7" :class='{"active":activeName == 7}' @click='activeName = 7' @touchstart='activeName = 7'>策划总监</div>
          <div class="job j8" :class='{"active":activeName == 8}' @click='activeName = 8' @touchstart='activeName = 8'>品牌创意策划总监</div>
          <div class="job j9" :class='{"active":activeName == 9}' @click='activeName = 9' @touchstart='activeName = 9'>导演/编导</div>
        </div>

        <h1>简历请发送至 bfzs3010@163.com</h1>

        <div class="jobNeed">
          <div class="item">
            岗位职责：
          </div>
          <div class="item" v-for='(i,index) in showList.job'>
            {{index + 1}}、{{i}}
          </div>
          <div class="item">
            岗位要求：
          </div>
          <div class="item" v-for='(i,index) in showList.need'>
            {{index + 1}}、{{i}}
          </div>
        </div>
      </div>
    </div>

    <footer-item></footer-item>
  </div>
</template>
<script>
import HeaderItem from '../components/Header';
import FooterItem from '../components/Footer';
export default {

  data () {
    return {
      activeName:1,
      showList:{},
      jobNeed:[
        {
          title:'大数据研发工程师',
          job:['负责公司大数据平台相关产品的设计，开发、文档撰写和项目改进','参与公司大数据平台上业务应用的功能设计及架构规划','负责优化平台软件的模块结构和流程逻辑'],
          need:['两年及以上Java开发经验','熟悉Java语言，熟悉虚拟机原理，数据结构和算法等基础扎实，熟练掌握并应用面向对象的编程思想','熟悉Hadoop以及相关开源大数据技术，如Hive、HBase、Storm、 机器学习等框架','有较强的责任心、上进心以及良好的表达和沟通能力']
        },
      {
        title:'平面设计师',
        job:['负责客户广告、专题的制作;','能独立设计公司平面类广告设计，PPT设计，具有良好的原创意能力和美术设计能力;','其他与美术设计相关的工作'],
        need:['美术、平面设计、计算机相关专业，专科及以上学历;','精通Photoshop，coreldraw，dreamweaver、flash等图形设计软件;','熟悉设计流程，思路清晰，具有较强的美术修养和审美观;','善于与人沟通，良好的团队合作精神和高度的责任感，能够承受压力，有创新精神，保证工作质量;']
      },
      {
        title:'交互设计师',
        job:['负责公司移动端系统及应用的交互工作','站在用户角度，与产品经理进行需求分析，发掘痛点，优化体验，输出逻辑清晰、说明详尽、符合易用易懂原则的设计方案','配合用户体验研究员进行用户访谈、可用性测试等用户研究工作','持续优化产品，提升产品的整体体验'],
        need:['对人机交互设计理论、工具有深入理解，并能灵活运用到项目中','性格开朗，擅长团队合作，有优秀的沟通与表达能力，能顺畅阅读英文文档','爱好广泛，有良好的学习和阅读习惯，对新技术、新事物乐于探索乐于分享']
      },
      {
        title:'Android开发工程师（高级）',
        job:['负责Android客户端的设计、编码、测试工作；','负责APP性能优化；','负责关键模块的技术攻关；','按照要求完成相关技术文档的编写。','协助项目组相关人员完成系统分析、架构及接口设计。','协助产品经理及UI完成界面及用户体验设计优化，实现产品用户体验的提升、机型适配等工作;'],
        need:['计算机、软件、电子、信息、自动化等相关专业；','4年以上的移动互联网从业经验,3年以上android应用开发经验；','熟知编程规范并熟悉软件开发流程，有框架设计的开发经验；','熟练掌握android、JAVA程序开发，熟悉NDK，掌握JNI运用；','熟悉数据结构、和常用算法； 面向对象设计，设计模式，Android UI设计，掌握Android下Activity、 Service，线程/进程的通信和同步， wifi、蓝牙、网络编程、数据存储与IO开发；','有社交相关产品开发经验者优先；','工作责任心强、有良好的沟通能力及团队合作精神，具有研究能力与创新能力，善于钻研。']
      },
      {
        title:'AI研发工程师',
        job:['从事机器学习/深度学习在自然语言处理、智能会话、语音识别、图像识别等领域的研究和开发工作','负责深度学习框架的搭建，包括算法实现及系统研发','支持公司相关产品在深度学习领域的研究'],
        need:['本科及以上学历，计算机相关专业','熟练使用Java/Python或者C/C++语言','在深度学习领域有过理论研究或者实践经验','善于解决和分析问题，富有想象力和学习能力，良好的团队合作精神','有创造性思维，有推进人工智能的理想和使命感']
      },
      {
        title:'iOS开发工程师（高级）',
        job:['负责iOS和OSx平台下软件的开发和维护。','负责软件的持续优化和升级。'],
        need:['本科及以上学历，计算机相关专业优先，乐于从事于软件开发行业。','两年以上iOS或OSx软件开发经验，熟悉xCode下的Object-C的开发。','熟悉UI、网络通信、P2P通讯等相关技术。','精通C、C++语言的开发和编程思想的优先。','有Windows下开发经验，或者Java开发经验的优先。','责任心强，态度端正，喜欢钻研技术开发。']
      },
      {
        title:'策划总监',
        job:['负责项目实施前期的市场调研与调研数据分析，为项目实施提供参考','负责项目的实施创意及整体策划','负责社团、连锁终端的推广活动策划','根据公司或项目不同阶段需要，组织、策划和实施各类宣传活动','协同推广部完成其他策划及推广工作'],
        need:['大专以上学历，市场营销相关专业，一年以上同岗位工作经验','能准确完整的表达自己的策划思路，具有较强的文字功底及编辑能力，能独立完成策划方案','具有较强的组织能力、资源整合能力、擅于调动各方资源达成目标','具有品牌推广理念，创意新颖，有自己的独特见解','优秀的团队合作能力，责任心强']
      },
      {
        title:'品牌创意策划总监',
        job:['负责建立、传播品牌的市场研究、营销策划、整合传播策划工作；','负责单位新媒体的营销战略、规划、策划的制定；','拓展合作伙伴资源，发掘外部商业机会,开展商务合作；','制定阶段性单位品牌推广、产品定位与策略的制定，协调相关部门执行，并对效果进行评估、总结；','负责组织搜集市场信息、行业政策、竞争对手动向、客户信息等，分析市场发展趋势，获取同行业相关展会活动，策划、参加重要活动与会议，提出市场分析报告，提供行业信息支持及建议；','开发、维护媒体关系，负责与媒体的联络交涉及合作。'],
        need:['新闻、传媒、广告、公共关系或市场营销相关专业本科以上学历；','5年以上品牌策划经验，熟悉营销行业，熟悉媒体行业运作体系，拥有丰富的媒体资源和推广渠道者优先；','有丰富的品牌推广策划执行经验，良好的市场分析能力和营销策划能力，对于品牌和市场营销有深刻的理解；','具备较强的分析和预测市场、把握市场趋势，具备资源整合能力和业务推进能力；','具备优秀的团队组建和管理能力以及优秀的沟通、协调、组织与开拓能力。']
      },
      {
        title:'导演/编导',
        job:['要求良好的文案创作和视频拍摄能力；','负责公司所需要的视频拍摄及后期制作;；','收集相关素材，进行提案大纲创作以及撰写分镜脚本；','组织拍摄与录制，负责现场的调度及现场把控；','跟进后期制作，督促并参与后期影片剪辑工作；','有丰富的演员资源者优先。'],
        need:['2年以上导演/编导工作经验']
      },
      ]
    }
  },
  methods:{
    tourl(url){
      tools.router.push({path:url})
    }
  },
  mounted(){
    var _this = this;
    this.showList = this.jobNeed[0];
  },
  watch:{
    activeName(val){
      $('.jobNeed').animate({"opacity":0}).animate({"opacity":1});
      this.showList = this.jobNeed[val - 1];
      $('body').animate({"scrollTop":'2000px'})
    }
  },
  components:{
    HeaderItem,FooterItem
  }
}
</script>

<style scoped lang='scss'>
@import '../assets/faicon/css/font-awesome.min.css';
.join{
  // font-family: "Helvetica Neue", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif, "微软雅黑" !important;

  .body{
    margin-top: 100px;
    border-top: 1px solid #D5D5D5;
  }
  .content{
    width: 1200px;
    color: #fff;
    padding-bottom: 60px;
    margin: 0 auto;



    h1{
      margin-top: 74px;
      margin-bottom: 55px;
      text-align: center;
      font-weight: normal;
    }

    .subText{
      text-align: center;
      color: #fff;
      font-size: 25px;
    }

    .mainJobs{
      position: relative;
      margin-top: 48px;
      width: 1200px;
      height: 700px;

      .job{
        position: absolute;
        width: 128px;
        height: 224px;
        padding-top: 94px;
        // margin: 100px auto;
        background-image: url('../assets/images/six.png');
        background-position: center;
        position: relative;
        cursor:pointer;
        text-align: center;
        color:#fff;
        font-size: 22px;



        &:hover,&.active{
          background: #6E99FF;
          transition: background .3s ease;
          color: #fff;

          &:before{
            border-right-color: #6E99FF;
            background-image: none;
            transition: all .3s ease;
          }
          &:after{
            border-left-color: #6E99FF;
            background-image: none;
            transition: all .3s ease;
          }
        }

        &:before{
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          left: -68px;
          top: 0;
          border-right: 68px solid transparent;
          border-top: 112px solid transparent;
          border-bottom: 112px solid transparent;
          background-image: url('../assets/images/six.png');
          background-position: 0;
          background-repeat: no-repeat;
          cursor:pointer;
        }
        &:after{
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          right: -68px;
          top: 0;
          border-left: 68px solid transparent;
          border-top: 112px solid transparent;
          border-bottom: 112px solid transparent;
          background-image: url('../assets/images/six.png');
          background-position: -260px -112px;
          background-repeat: no-repeat;
          cursor:pointer;
        }
      }

      .j1{
        position: absolute;
        left:533px;
        top: 0;
      }
      .j2{
        position: absolute;
        left: 337px;
        top: 110px;
      }
      .j3{
        position: absolute;
        left: 729px;
        top: 110px;
      }
      .j4{
        position: absolute;
        left: 533px;
        top: 221px;
      }
      .j5{
        position: absolute;
        left: 141px;
        top: 221px;
      }
      .j6{
        position: absolute;
        left: 924px;
        top: 221px;
      }
      .j7{
        position: absolute;
        left: 337px;
        top: 331px;
      }
      .j8{
        position: absolute;
        left: 729px;
        top: 331px;
      }
      .j9{
        position: absolute;
        left: 533px;
        top: 442px;
      }
    }

    .jobNeed{
      border: 1px solid #A0A0A0;
      padding: 15px;
      .item{
        color:#fff;
        font-size: 20px;
        margin-bottom: 15px;
      }
    }
  }

}
</style>
